<script lang="ts" setup>
import useTable from '@/hooks/useTable'
import { TableRowSelection } from '@arco-design/web-vue'
import { get, message } from '@/utils'
import { marketMap, Market } from '@/enum/market'
import Seller from '../FormItem/Seller.vue'
const emit = defineEmits(['update:show', 'reset', 'confirm', 'cancel', 'update:list', 'update:id'])
const props = defineProps<{
  show: boolean
  info?: any
  ids?: any[] | string
  type?: 'radio' | 'checkbox'
  publicityType?: Market
}>()
console.log(props)
const sellerId = ref('')
const { formatColumns } = useTable()
const formRef = ref()
const actionRef = ref()
const selectedKeys = ref([] as any[])
const pagination = {
  showPageSize: true,
  pageSize: 20,
}
const list = ref<any[]>([])
const request = (params: any, sort: any, filters: any): Promise<any> => {
  return new Promise((resolve, reject) => {
    if (!sellerId.value) {
      resolve({
        data: [],
        total: 0,
        success: true,
      })
    } else
      get(
        {
          url: '/server-shop/admin/publicity/page',
          data: { size: params.pageSize, ...params, sellerId: sellerId.value, type: props.publicityType },
        },
        ({ data, code }) => {
          const now = new Date().getTime()
          data.records.forEach(item => {
            item.disabled = now > new Date(item.endTime).getTime()
          })
          list.value = data.records

          resolve({
            data: data.records,
            total: data.total,
            success: code == 200,
          })
        }
      )
  })
}
const submit = done => {
  if (!selectedKeys.value.length) {
    message({
      type: 'error',
      content: '至少选择一个商户',
    })
    done(false)
    return
  }
  const _list = list.value.filter(f => selectedKeys.value.some(id => f.id == id))
  console.log('🚀 ~ submit ~ selectedKeys:', selectedKeys)
  emit('update:list', _list)
  emit('confirm', selectedKeys.value)
  emit('update:show', false)
  done(true)
}
const columns = formatColumns([
  { title: '归属商户', dataIndex: 'sellerId1', width: 200, hideInTable: true, hideInSearch: false, formSlotName: 'sellerId1', valueType: 'select' },
  { title: '归属商户', dataIndex: 'sellerId', width: 200 },
  { title: '活动ID', dataIndex: 'id', width: 200 },
  // { title: '活动类型', dataIndex: 'type', hideInSearch: false, width: 200, valueEnum: marketMap },
  { title: '标题', dataIndex: 'title', hideInSearch: false, width: 200 },
  {
    title: '排序',
    dataIndex: 'sort',
    width: 200,
    sorter: true,
  },
  { title: '开始时间', dataIndex: 'beginTime', width: 200 },
  { title: '结束时间', dataIndex: 'endTime', width: 200 },
  // { title: '状态', dataIndex: 'status' },
  // { title: '配置', dataIndex: 'config', width: 200 },
  { title: '创建时间', dataIndex: 'createTime', width: 200 },
])
const rowSelection = computed<TableRowSelection>(() => {
  if (props.type == 'checkbox') {
    return {
      type: 'checkbox',
      showCheckedAll: true,
      onlyCurrent: false,
    }
  } else {
    return {
      type: 'radio',
    }
  }
})
onMounted(() => {
  if (typeof props.ids == 'string') {
    selectedKeys.value = props.ids.split(',')
  } else if (props.ids instanceof Array) {
    selectedKeys.value = props.ids
  }
})
</script>
<template>
  <CModal v-model:visible="props.show" @before-ok="submit" :mask-closable="false" width="1200px" title="营销活动列表" @cancel="emit('update:show', false)">
    <a-space direction="vertical" style="width: 100%">
      <ProTable
        :columns="columns"
        :request="request"
        row-key="id"
        :form-ref="ref => (formRef = ref)"
        :pagination="pagination"
        header-title=""
        :scroll="{ x: 1000 }"
        column-resizable
        :bordered="{ cell: true }"
        :action-ref="ref => (actionRef = ref)"
        v-model:selectedKeys="selectedKeys"
        :row-selection="rowSelection"
      >
        <template #option-render="{ dom, reset }">
          <component :is="dom[1]" />
          <component :is="dom[0]" />
        </template>
        <template #sellerId1>
          <Seller v-model:val="sellerId" />
        </template>
      </ProTable>
    </a-space>
  </CModal>
</template>
<style lang="less" scoped></style>
